<template>
    <div>

        <div>
            <div style="float: left;margin-left: 20%">
                <el-tooltip
                        effect="dark"
                        :disabled="!disabledValue"
                        content="权限不足！"
                        placement="top"
                >
                    <div>
                        <el-button @click="deleteBatch" type="danger" icon="el-icon-delete" :disabled="disabledValue">批量删除</el-button>
                    </div>
                </el-tooltip>
            </div>
            <div style="float: left">
                <el-tooltip
                        effect="dark"
                        :disabled="!disabledValue"
                        content="权限不足！"
                        placement="top"
                >
                    <div>
                        <el-button type="primary" icon="el-icon-delete" @click="dialogFormVisible = true" :disabled="disabledValue" style="margin-left: 10px">添加</el-button>
                    </div>
                </el-tooltip>
            </div>

            <div style="float: right;margin-right: 20%">
                <el-tooltip
                        effect="dark"
                        :disabled="!disabledValue"
                        content="权限不足！"
                        placement="top"
                >
                    <div>
                        <el-upload
                                :show-file-list="false"
                                accept="application/vnd.ms-excel"
                                action="http://localhost:8081/ICDManagement/code/upload"
                                :headers="config"
                                :on-success="fileUploadSuccess"
                                :on-error="fileUploadError"
                                :disabled="fileUploadBtnText == '正在导入'"
                                :before-upload="beforeFileUpload"
                                style="display: inline; margin-left:10px;"
                        >
                            <el-button
                                    type="success"
                                    :disabled="disabledValue"
                                    :icon="uploadBtnIcon"
                                    :loading="fileUploadBtnText == '正在导入'"
                            ><i></i>{{ fileUploadBtnText }}
                            </el-button>
                        </el-upload>
                    </div>
                </el-tooltip>
            </div>

            <div style="float: right">
                <el-tooltip
                        effect="dark"
                        :disabled="!disabledValue"
                        content="权限不足！"
                        placement="top"
                >
                    <div>
                        <el-button type="primary" icon="el-icon-download" :disabled="disabledValue" style="margin-left: 10px">导出数据</el-button>
                    </div>
                </el-tooltip>
            </div>

            <br>
            <br>

            <el-dialog title="添加编码数据" :visible.sync="dialogFormVisible" @close="resetFormOnClose" :destroy-on-close="true">
                <el-form :model="saveForm" :rules="rules" ref="saveForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="疾病名称" prop="name">
                        <el-input v-model="saveForm.name"></el-input>
                    </el-form-item>

                    <el-form-item label="疾病编码" prop="icdCode">
                        <el-input v-model="saveForm.icdCode"></el-input>
                    </el-form-item>

                    <el-form-item label="编码类型" prop="type">
                        <el-select
                                v-model="saveForm.type"
                                filterable
                                remote
                                reserve-keyword
                                placeholder="请选择编码类型"
                                :remote-method="remoteMethod"
                                :loading="loading">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="submitForm('saveForm')">立即添加</el-button>
                        <el-button @click="resetForm('saveForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>

            <el-dialog title="更新编码数据" :visible.sync="dialogUpdateForm" >
                <el-form :model="updateForm" :rules="rules" ref="updateForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="疾病名称" prop="name">
                        <el-input v-model="updateForm.name"></el-input>
                    </el-form-item>

                    <el-form-item label="疾病编码" prop="icdCode">
                        <el-input v-model="updateForm.icdCode"></el-input>
                    </el-form-item>

                    <el-form-item label="编码类型" prop="type">
                        <el-select
                                v-model="updateForm.type"
                                filterable
                                remote
                                reserve-keyword
                                placeholder="请选择编码类型"
                                :remote-method="remoteMethod"
                                :loading="loading">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="updateDialogForm('updateForm')">立即修改</el-button>
                        <el-button @click="resetForm('updateForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>


        </div>
        <br>
        <el-table
                :data="tableData"
                border
                class="ctbox"
                @selection-change="handleSelectionChange"
                height="320"
                style="width: 60%">
            <el-table-column
                    fixed
                    type="selection"
                    width="45">
            </el-table-column>
            <el-table-column
                    label="编号"
                    type="index"
                    :index='(index)=>{return (index+1) + (this.currentPage-1)*20}'
                    width="63">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="疾病名称"
                    :show-overflow-tooltip="true"
                    width="360">
            </el-table-column>
            <el-table-column
                    prop="icdCode"
                    label="编码"
                    align="center"
                    width="130">
            </el-table-column>
            <el-table-column
                    prop="type"
                    label="属性"
                    align="center"
                    width="130">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    align="center"
                    width="130">
                <template slot-scope="scope">
                    <el-row>
                        <el-col :span="12">
                            <el-tooltip
                                    effect="dark"
                                    :disabled="!disabledValue"
                                    content="权限不足！"
                                    placement="top"
                            >
                                <div>
                                    <el-button type="primary" icon="el-icon-edit" @click="readCodeData(scope.row)" circle :disabled="disabledValue"></el-button>
                                </div>
                            </el-tooltip>
                        </el-col>
                        <el-col :span="12">
                            <el-tooltip
                                    effect="dark"
                                    :disabled="!disabledValue"
                                    content="权限不足！"
                                    placement="top"
                            >
                                <div>
                                    <el-popconfirm
                                            confirm-button-text='确定'
                                            cancel-button-text='取消'
                                            icon="el-icon-info"
                                            icon-color="red"
                                            title="确定删除这条数据吗?"
                                            @confirm="deleteOneById(scope.row)"
                                    >
                                        <el-button slot="reference" type="danger" icon="el-icon-delete" circle :disabled="disabledValue"></el-button>
                                    </el-popconfirm>
                                </div>
                            </el-tooltip>
                        </el-col>
                    </el-row>
                </template>
            </el-table-column>
        </el-table>
        <br>
        <el-pagination
                background
                style="margin-left: 20%"
                layout="prev, pager, next"
                :page-size="20"
                :current-page="currentPage"
                @current-change="page"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        props:[
            'searchVal'
        ],
        name: "CodeQuery",
        watch:{
            searchVal:function (val) {
                this.info=val;
                this.tableData=val.tableData;
                this.total=val.total;
                this.currentPage=val.currentPage;
            }
        },
        methods: {
            //删除单条记录
            deleteOneById(row) {
                const _this = this;
                axios.delete('http://127.0.0.1:8081/ICDManagement/code/deleteOne/'+row.id).then(function (res) {
                    if(res.data === 'success'){
                        _this.$notify({
                            title: '成功',
                            message: '删除成功',
                            type: 'success',
                            duration:2000
                        });
                        _this.page(1);
                    }else {
                        _this.$notify.error({
                            title: '错误',
                            message: '删除失败',
                            duration:2000
                        });
                    }
                });
            },

            //批量删除
            deleteBatch(){
                if(this.multipleSelection.length === 0){
                    this.$alert('请至少选择一条记录', '提示', {
                        confirmButtonText: '确定',
                    });
                }else {
                    this.$confirm('此操作将删除选中的全部记录，是否删除?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        const _this = this;
                        var ids = [];
                        this.multipleSelection.forEach((item,index) => {
                            ids.splice(index,0,item.id)
                        })
                        axios.delete('http://127.0.0.1:8081/ICDManagement/code/deleteBatch',{
                            data:ids
                        }).then(function (res) {
                            if(res.data === 'success'){
                                _this.$notify({
                                    title: '成功',
                                    message: '删除成功',
                                    type: 'success',
                                    duration:2000
                                });
                                _this.page(1);
                            }else {
                                _this.$notify.error({
                                    title: '错误',
                                    message: '删除失败',
                                    duration:2000
                                });
                                _this.page(1);
                            }
                        });
                    }).catch(() => {
                        this.$notify.info({
                            message: '已取消删除'
                        });
                    });
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            //分页插件改变事件函数
            page(currentPage){
                const _this = this;
                axios.get('http://127.0.0.1:8081/ICDManagement/codeQuery/'+currentPage+'/20',{
                    params:{
                        name:_this.info.name,
                        icdCode:_this.info.icdCode,
                        type:_this.info.type
                    }
                }).then(function (res) {
                    _this.currentPage=currentPage;
                    _this.total=parseInt(res.data.total);
                    _this.tableData=res.data.data;
                });
            },

            //关闭对话框重置表单
            resetFormOnClose(){
                this.$refs.saveForm.resetFields();
            },

            //提交表单
            submitForm(formName) {
                const _this = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post('http://127.0.0.1:8081/ICDManagement/code/codeSave',this.saveForm).then(function (res) {
                            if(res.data === 'success'){
                                _this.$notify({
                                    title: '成功',
                                    message: '添加成功',
                                    type: 'success',
                                    duration:2000
                                });
                                _this.dialogFormVisible=false;
                                _this.page(1);
                            }else {
                                _this.$notify.error({
                                    title: '错误',
                                    message: '添加失败',
                                    duration:2000
                                });
                            }
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

            //修改数据的提交表单
            updateDialogForm(formName) {
                const _this = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.put('http://127.0.0.1:8081/ICDManagement/code/codeUpdate',this.updateForm).then(function (res) {
                            if(res.data === 'success'){
                                _this.$notify({
                                    title: '成功',
                                    message: '修改成功',
                                    type: 'success',
                                    duration:2000
                                });
                                _this.dialogUpdateForm=false;
                                _this.page(1);
                            }else {
                                _this.$notify.error({
                                    title: '错误',
                                    message: '修改失败',
                                    duration:2000
                                });
                            }
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

            readCodeData(row){
                this.updateForm.id=row.id;
                this.updateForm.name=row.name;
                this.updateForm.type=row.type;
                this.updateForm.icdCode=row.icdCode;
                this.dialogUpdateForm=true;
            },

            //重置表单
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },

            //远程搜索
            remoteMethod(query) {
                if (query !== '') {
                    this.loading = true;
                    setTimeout(() => {
                        this.loading = false;
                        this.options = this.list.filter(item => {
                            return item.label.toLowerCase()
                                .indexOf(query.toLowerCase()) > -1;
                        });
                    }, 200);
                } else {
                    this.options = [];
                }
            },

            //上传组件的方法
            fileUploadSuccess() {
                this.uploadBtnIcon = "el-icon-upload2";
                this.fileUploadBtnText = "导入数据";
                this.$message.success("数据导入成功！");
                this.page(1);
            },
            fileUploadError() {
                this.uploadBtnIcon = "el-icon-upload2";
                this.fileUploadBtnText = "导入数据";
            },
            beforeFileUpload(file) {
                this.uploadBtnIcon = "el-icon-loading";
                this.fileUploadBtnText = "正在导入";
            },

            //获取ICD版本列表
            getIcdType(){
                const _this = this;
                axios.get('http://127.0.0.1:8081/ICDManagement/code/getVersionList').then(function (res) {
                    _this.states=res.data;
                    _this.list = _this.states.map(item => {
                        return { 'value': item.id,
                            'label': item.name
                        };
                    });
                });
            }

        },
        created() {
            this.getIcdType();
            this.account = JSON.parse(window.localStorage.getItem('access-data'));
            this.page(1);
            if(this.account.role === 'admin'){
                this.disabledValue=false;
            }
        },
        data() {
            return {

                account:'',

                //分页插件变量
                total: 300,
                currentPage: 1,

                //多选框选中的数据
                multipleSelection: [],

                //查询表变量

                info: '',
                tableData: [

                ],

                //添加表单变量
                dialogFormVisible: false,
                formLabelWidth: '120px',
                saveForm: {
                    name: '',
                    icdCode: '',
                    type: ''
                },
                rules: {
                    name: [
                        { required: true, message: '请输入疾病名称', trigger: 'blur' }
                    ],
                    icdCode: [
                        { required: true, message: '请输入疾病编码', trigger: 'blur' }
                    ],
                    type: [
                        { required: true, message: '请选择编码类型', trigger: 'change' }
                    ]
                },

                //更新表单变量
                dialogUpdateForm:false,
                updateForm: {
                    id:'',
                    name: '',
                    icdCode: '',
                    type: ''
                },

                disabledValue:true,

                //upload上传组件变量
                fileUploadBtnText: "导入数据",
                uploadBtnIcon: "el-icon-upload2",

                //远程搜索变量
                options: [],
                value: '',
                list: [],
                loading: false,
                states: []
            }
        },

        computed:{
            config() {
                return {'token' : this.account.token};
            }
        },
    }
</script>

<style scoped>
    .el-row {
        margin-bottom: 20px;
    &:last-child {
         margin-bottom: 0;
     }
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
    .ctbox{ margin:0 auto;}
</style>